<template>
    <div>
        <Form :label-width="80">
            <Row>
                <Alert show-icon>此页面可修改投票项目信息</Alert>
            </Row>
            <Row class="expand-row">
                <Col span="12">
                    <FormItem label="活动标题：">
                        <Input :value="row.title" style="width: 350px;" v-model="row.title"/>
                    </FormItem>
                </Col>
                <Col span="12">

                    <FormItem label="投票时间：">
                        <DatePicker type="daterange"
                                    :value="timeRange"
                                    confirm
                                    placement="left"
                                    :placeholder="timeRangeTip"
                                    @on-change="handleChange"
                                    @on-ok="handleOk"
                                    style="width: 350px;">

                        </DatePicker>
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="24">
                    <FormItem label="活动简介：">
                        <Input type="textarea" :rows="3" :value="row.brief" v-model="row.brief"/>
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="8">
                    <i-switch v-model="activityEnable" @on-change="statusChange" size="large">
                        <span slot="open">生效</span>
                        <span slot="close">失效</span>
                    </i-switch>
                </Col>
            </Row>
            <Row type="flex" justify="center">
                <Col style="text-align: center">
                <Button type="success" shape="circle" icon="android-done" @click="updateActivity"></Button>
                </Col>
            </Row>
        </Form>

    </div>
</template>

<script>
    import util from '../../libs/util'

    export default {
        data() {
            return {
                timeRange: [],
                timeRangeTip: '未设置',
                activityEnable: this.row.enable
            }
        },
        props: {
            row: Object
        },
        methods: {
            statusChange(status) {
                this.row.enable = status;
            },
            handleChange(date) {
                this.timeRange = date
            },

            handleOk() {
                this.setTimeRange()
            },
            setTimeRange() {

                util.ajax({
                    url: '/admin/activity/vote/time',
                    method: 'post',
                    params: {activityId: this.row.id, startTime: this.timeRange[0], endTime: this.timeRange[1]},
                }).then(response => {

                    if (response.data.errorCode === 0) {
                        this.$Message.success('操作成功');
                        this.timeRangeTip = '生效时间：' + this.timeRange[0] + ' 至 ' + this.timeRange[1];
                        this.row.voteTime = this.timeRange[0] + ' 至 ' + this.timeRange[1];

                    } else {
                        this.$Message.error(response.data.message);
                    }

                }).catch(error => {
                    console.log(error);
                    this.$Message.error('网络错误!');
                });
            },
            updateTimeRange() {

                util.ajax({
                    url: '/admin/activity',
                    method: 'get',
                    params: {activityId: this.row.id},
                }).then(response => {

                    var data = response.data.data;
                    if (response.data.errorCode === 0) {
                        var startDate = new Date(data.voteStartTime);
                        var endDate = new Date(data.voteEndTime);

                        var start = startDate.getFullYear() + '-' + (startDate.getMonth()+1 < 10 ? '0'+(startDate.getMonth()+1) : startDate.getMonth()+1) + '-' + startDate.getDate();
                        var end = endDate.getFullYear() + '-' + (endDate.getMonth()+1 < 10 ? '0'+(endDate.getMonth()+1) : endDate.getMonth()+1) + '-' + endDate.getDate();

                        this.timeRangeTip = '生效时间：' + start + ' 至 ' + end;
                    }

                }).catch(error => {
                    console.log(error)
                });
            },
            updateActivity() {

                util.ajax({
                    url: '/admin/activity/update',
                    method: 'post',
                    params: {
                        id: this.row.id,
                        title: this.row.title,
                        brief: this.row.brief,
                        enable: this.row.enable
                    },
                }).then(response => {

                    var data = response.data.data;
                    if (response.data.errorCode === 0) {
                        this.row.title = data.title;
                        this.row.brief = data.brief;
                        this.row.enable = data.enable;
                        this.$Message.success('操作成功');
                    } else {
                        this.$Message.error('操作失败');
                    }

                }).catch(error => {
                    console.log(error)
                });
            }
        },
        mounted() {
            this.updateTimeRange();
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>